<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyTechBook</title>
        
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
</head>
<body>
<div class="navbar navbar-line">
    <div class="container">
        <div class="logo">
            
                MyTechBook
            
        </div>
        <input type="checkbox" id="idoc_nav" />
        <div class="menu_tree">
        <ul><li><a href="../../index.html">首页</a></li><li><a href="#"><span></span>前沿观察</a><ul><li><a href="../../html/前沿观察/ECMAScript 6入门.html">ECMAScript 6入门</a></li><li><a href="../../html/前沿观察/Immutable详解及React中实践.html">Immutable详解及React中实践</a></li><li><a href="../../html/前沿观察/Node.js MVC框架ThinkJS.html">Node.js MVC框架ThinkJS</a></li><li><a href="../../html/前沿观察/Nodejs 5.0.0版本.html">Nodejs 5.0.0版本</a></li><li><a href="../../html/前沿观察/关系型数据库PostgreSQL.html">关系型数据库PostgreSQL</a></li><li><a href="../../html/前沿观察/轻型MVVM框架Vue.js.html">轻型MVVM框架Vue.js</a></li><li><a href="../../html/前沿观察/基于nodejs的开发框架koa.html">基于nodejs的开发框架koa</a></li></ul></li><li><a href="#"><span></span>前端工程化</a><ul><li><a href="../../html/前端工程化/前端模板.html">前端模板</a></li><li><a href="../../html/前端工程化/性能优化和前端工程的爱恨情仇.html">性能优化和前端工程的爱恨情仇</a></li><li><a href="../../html/前端工程化/webpack入门及实践.html">webpack入门及实践</a></li><li><a href="../../html/前端工程化/前端工程化不完全装逼指南.html">前端工程化不完全装逼指南</a></li></ul></li><li><a href="#"><span></span>性能优化</a><ul><li><a href="../../html/性能优化/jshint代码质量检测.html">jshint代码质量检测</a></li><li><a href="../../html/性能优化/jshint配置说明.html">jshint配置说明</a></li><li><a href="../../html/性能优化/NC性能优化.html">NC性能优化</a></li><li class="active"><a href="../../html/性能优化/React编码规范.html">React编码规范</a></li><li><a href="../../html/性能优化/性能优化待办事项.html">性能优化待办事项</a></li><li><a href="../../html/性能优化/性能优化点总结.html">性能优化点总结</a></li></ul></li><li><a href="#"><span></span>技术分享</a><ul><li><a href="../../html/技术分享/React技术分享.html">React技术分享</a></li><li><a href="../../html/技术分享/学习Git.html">学习Git</a></li><li><a href="../../html/技术分享/面向对象.html">面向对象</a></li><li><a href="../../html/技术分享/Node.js知识详解.html">Node.js知识详解</a></li><li><a href="../../html/技术分享/2015年大前端技术年终总结.html">2015年大前端技术年终总结</a></li></ul></li><li><a href="#"><span></span>随想笔记</a><ul><li><a href="../../html/随想笔记/项目技术栈规划.html">项目技术栈规划</a></li><li><a href="../../html/随想笔记/笔试面试大纲.html">笔试面试大纲</a></li></ul></li><li><a href="../../html/CONTACT.html">CONTACT</a></li></ul>    
        </div>
        
        
        <div class="forkgithub"><a target="_blank" href="https://github.com/sujunming">fork on github</a></div>
        

        <section class="idoc_nav_btn">
            <label for="idoc_nav"><span></span></label>
        </section>
    </div>
    
</div>




<div class="container">

    <div class="page-toc">
        <ul><li><a href="#t0React/JSX 编码规范">React/JSX 编码规范</a><ul><li><a href="#t1基本规范">基本规范</a></li><li><a href="#t2命名规范">命名规范</a><ul><li><a href="#t3带命名空间的组件">带命名空间的组件</a></li></ul></li><li><a href="#t4组件声明">组件声明</a></li><li><a href="#t5属性">属性</a><ul><li><a href="#t6属性命名">属性命名</a></li><li><a href="#t7属性设置">属性设置</a></li><li><a href="#t8属性对齐方式">属性对齐方式</a></li><li><a href="#t9行内迭代">行内迭代</a></li></ul></li><li><a href="#t10其他代码格式">其他代码格式</a><ul><li><a href="#t11注释">注释</a></li><li><a href="#t12引号使用">引号使用</a></li><li><a href="#t13条件 HTML">条件 HTML</a></li><li><a href="#t14() 使用">() 使用</a></li><li><a href="#t15自闭合标签">自闭合标签</a></li><li><a href="#t16组件内部代码组织">组件内部代码组织</a></li></ul></li><li><a href="#t17代码校验工具">代码校验工具</a></li><li><a href="#t18参考资源">参考资源</a></li></ul></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h1 id="t0React/JSX &#x7F16;&#x7801;&#x89C4;&#x8303;">React/JSX &#x7F16;&#x7801;&#x89C4;&#x8303; <a href="#t0React/JSX &#x7F16;&#x7801;&#x89C4;&#x8303;"> # </a></h1>
<h2 id="t1&#x57FA;&#x672C;&#x89C4;&#x8303;">&#x57FA;&#x672C;&#x89C4;&#x8303; <a href="#t1&#x57FA;&#x672C;&#x89C4;&#x8303;"> # </a></h2>
<ul>
<li>&#x6BCF;&#x4E2A;&#x6587;&#x4EF6;&#x53EA;&#x5305;&#x542B;&#x7684;&#x4E00;&#x4E2A; React &#x7EC4;&#x4EF6;&#xFF08;&#x8054;&#x7CFB;&#x7D27;&#x5BC6;&#x7684;&#x7EC4;&#x4EF6;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x300C;&#x547D;&#x540D;&#x7A7A;&#x95F4;&#x7684;&#x5F62;&#x5F0F;&#x300D;&#xFF09;&#x3002;</li>
<li>&#x59CB;&#x7EC8;&#x4F7F;&#x7528; JSX &#x8BED;&#x6CD5;&#xFF0C;&#x4E0D;&#x8981;&#x4F7F;&#x7528; <code>React.createElement</code> &#x521B;&#x5EFA; ReactElement&#xFF0C;&#x4EE5;&#x63D0;&#x9AD8;&#x7F16;&#x5199;&#x901F;&#x5EA6;&#x3001;&#x53EF;&#x8BFB;&#x6027;&#x3001;&#x53EF;&#x7EF4;&#x62A4;&#x6027;&#xFF08;&#x6CA1;&#x6709; JSX &#x8F6C;&#x6362;&#x7684;&#x7279;&#x6B8A;&#x573A;&#x666F;&#x4F8B;&#x5916;&#xFF0C;&#x5982;&#x5728; <code>console</code> &#x4E2D;&#x6D4B;&#x8BD5;&#x7EC4;&#x4EF6;&#xFF09;&#x3002;</li>
<li>&#x4F7F;&#x7528; <strong>ES6</strong>&#x3002;</li>
</ul>
<h2 id="t2&#x547D;&#x540D;&#x89C4;&#x8303;">&#x547D;&#x540D;&#x89C4;&#x8303; <a href="#t2&#x547D;&#x540D;&#x89C4;&#x8303;"> # </a></h2>
<ul>
<li><strong>&#x6269;&#x5C55;&#x540D;</strong>&#xFF1A;&#x4F7F;&#x7528; <code>.js</code> &#x4F5C;&#x4E3A; React &#x7EC4;&#x4EF6;&#x7684;&#x6269;&#x5C55;&#x540D;&#xFF1B;</li>
<li><strong>&#x6587;&#x4EF6;&#x540D;</strong>&#xFF1A;&#x4F7F;&#x7528;<strong>&#x5927;&#x9A7C;&#x5CF0;&#x547D;&#x540D;&#x6CD5;</strong>&#xFF0C;&#x5982; <code>MyComponent.js</code>&#xFF1B;</li>
<li><p><strong>&#x7EC4;&#x4EF6;&#x547D;&#x540D;</strong>&#xFF1A;&#x7EC4;&#x4EF6;&#x540D;&#x79F0;&#x548C;&#x6587;&#x4EF6;&#x540D;&#x4E00;&#x81F4;&#xFF0C;&#x5982; <code>MyComponent.js</code> &#x91CC;&#x7684;&#x7EC4;&#x4EF6;&#x540D;&#x5E94;&#x8BE5;&#x662F; <code>MyComponent</code>&#xFF1B;&#x4E00;&#x4E2A;&#x76EE;&#x5F55;&#x7684;&#x6839;&#x7EC4;&#x4EF6;&#x4F7F;&#x7528; <code>index.js</code> &#x547D;&#x540D;&#xFF0C;&#x4EE5;&#x76EE;&#x5F55;&#x540D;&#x79F0;&#x4F5C;&#x4E3A;&#x7EC4;&#x4EF6;&#x540D;&#x79F0;&#xFF1B;</p>
<pre><code class="lang-js">  <span class="hljs-comment">// Use the filename as the component name</span>

  <span class="hljs-comment">// file contents</span>
  <span class="hljs-keyword">const</span> CheckBox = React.createClass({
    <span class="hljs-comment">// ...</span>
  })

  <span class="hljs-built_in">module</span>.exports = CheckBox;

  <span class="hljs-comment">// in some other file</span>
  <span class="hljs-comment">// bad</span>
  <span class="hljs-keyword">const</span> CheckBox = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./checkBox&apos;</span>);

  <span class="hljs-comment">// bad</span>
  <span class="hljs-keyword">const</span> CheckBox = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./check_box&apos;</span>);

  <span class="hljs-comment">// good</span>
  <span class="hljs-keyword">const</span> CheckBox = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./CheckBox&apos;</span>);
</code></pre>
<pre><code class="lang-js"><span class="hljs-comment">// for root components of a directory,</span>
<span class="hljs-comment">// use index.js as the filename and use the directory name as the component name</span>

<span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> Footer = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./Footer/Footer.js&apos;</span>)

<span class="hljs-comment">// bad</span>
<span class="hljs-keyword">const</span> Footer = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./Footer/index.js&apos;</span>)

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">const</span> Footer = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./Footer&apos;</span>)
</code></pre>
</li>
<li><p><strong>&#x5F15;&#x7528;&#x547D;&#x540D;</strong>&#xFF1A;React &#x7EC4;&#x4EF6;&#x4F7F;&#x7528;<strong>&#x5927;&#x9A7C;&#x5CF0;&#x547D;&#x540D;&#x6CD5;</strong>&#xFF0C;HTML &#x6807;&#x7B7E;&#x3001;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x4F7F;&#x7528;<strong>&#x5C0F;&#x9A7C;&#x5CF0;&#x547D;&#x540D;&#x6CD5;</strong>&#xFF1B;</p>
<pre><code class="lang-js"> <span class="hljs-comment">// bad</span>
  <span class="hljs-keyword">const</span> reservationCard = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./ReservationCard&apos;</span>);

  <span class="hljs-comment">// good</span>
  <span class="hljs-keyword">const</span> ReservationCard = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./ReservationCard&apos;</span>);

  <span class="hljs-comment">// bad</span>
  <span class="hljs-keyword">const</span> ReservationItem = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">ReservationCard</span> /&gt;</span>;</span>

  <span class="hljs-comment">// good</span>
  <span class="hljs-keyword">const</span> reservationItem = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">ReservationCard</span> /&gt;</span>;</span>

  <span class="hljs-comment">// HTML tag</span>
  <span class="hljs-keyword">const</span> myDivElement = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">&quot;foo&quot;</span> /&gt;</span>;</span>
  React.render(myDivElement, mountNode);
</code></pre>
</li>
</ul>
<h3 id="t3&#x5E26;&#x547D;&#x540D;&#x7A7A;&#x95F4;&#x7684;&#x7EC4;&#x4EF6;">&#x5E26;&#x547D;&#x540D;&#x7A7A;&#x95F4;&#x7684;&#x7EC4;&#x4EF6; <a href="#t3&#x5E26;&#x547D;&#x540D;&#x7A7A;&#x95F4;&#x7684;&#x7EC4;&#x4EF6;"> # </a></h3>
<ul>
<li><p>&#x5982;&#x679C;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x6709;&#x8BB8;&#x591A;&#x5173;&#x8054;&#x5B50;&#x7EC4;&#x4EF6;&#xFF0C;&#x53EF;&#x4EE5;&#x4EE5;&#x8BE5;&#x7EC4;&#x4EF6;&#x4F5C;&#x4E3A;&#x547D;&#x540D;&#x7A7A;&#x95F4;&#x7F16;&#x5199;&#x3001;&#x8C03;&#x7528;&#x5B50;&#x7EC4;&#x4EF6;&#x3002;</p>
<p>  ```js
  var MyFormComponent = React.createClass({ ... });</p>
<p>  MyFormComponent.Row = React.createClass({ ... });
  MyFormComponent.Label = React.createClass({ ... });
  MyFormComponent.Input = React.createClass({ ... });</p>
</li>
</ul>
<pre><code>var Form = MyFormComponent;

var App = (
  &lt;Form&gt;
    &lt;Form.Row&gt;
      &lt;Form.Label /&gt;
      &lt;Form.Input /&gt;
    &lt;/Form.Row&gt;
  &lt;/Form&gt;
);
```
</code></pre><h2 id="t4&#x7EC4;&#x4EF6;&#x58F0;&#x660E;">&#x7EC4;&#x4EF6;&#x58F0;&#x660E; <a href="#t4&#x7EC4;&#x4EF6;&#x58F0;&#x660E;"> # </a></h2>
<ul>
<li><p>&#x4E0D;&#x8981;&#x4F7F;&#x7528; <code>displayName</code> &#x6765;&#x547D;&#x540D;&#x7EC4;&#x4EF6;&#xFF0C;&#x901A;&#x8FC7;&#x5F15;&#x7528;&#x6765;&#x547D;&#x540D;&#x3002;</p>
<pre><code class="lang-js">  <span class="hljs-comment">// bad</span>
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> React.createClass({
    displayName: <span class="hljs-string">&apos;ReservationCard&apos;</span>,
    <span class="hljs-comment">// stuff goes here</span>
  });

  <span class="hljs-comment">// good</span>
  <span class="hljs-keyword">const</span> ReservationCard = React.createClass({
    <span class="hljs-comment">// stuff goes here</span>
  });

  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> ReservationCard;
</code></pre>
</li>
</ul>
<h2 id="t5&#x5C5E;&#x6027;">&#x5C5E;&#x6027; <a href="#t5&#x5C5E;&#x6027;"> # </a></h2>
<h3 id="t6&#x5C5E;&#x6027;&#x547D;&#x540D;">&#x5C5E;&#x6027;&#x547D;&#x540D; <a href="#t6&#x5C5E;&#x6027;&#x547D;&#x540D;"> # </a></h3>
<ul>
<li>React &#x7EC4;&#x4EF6;&#x7684;&#x5C5E;&#x6027;&#x4F7F;&#x7528;<strong>&#x5C0F;&#x9A7C;&#x5CF0;&#x547D;&#x540D;&#x6CD5;</strong>&#xFF1B;</li>
<li>&#x4F7F;&#x7528; <code>className</code> &#x4EE3;&#x66FF; <code>class</code> &#x5C5E;&#x6027;&#xFF1B;</li>
<li>&#x4F7F;&#x7528; <code>htmlFor</code> &#x4EE3;&#x66FF; <code>for</code> &#x5C5E;&#x6027;&#x3002;</li>
</ul>
<p><strong>&#x4F20;&#x9012;&#x7ED9; HTML &#x7684;&#x5C5E;&#x6027;&#xFF1A;</strong></p>
<ul>
<li>&#x4F20;&#x9012;&#x7ED9; HTML &#x5143;&#x7D20;&#x7684;&#x81EA;&#x5B9A;&#x4E49;&#x5C5E;&#x6027;&#xFF0C;&#x9700;&#x8981;&#x6DFB;&#x52A0; <code>data-</code> &#x524D;&#x7F00;&#xFF0C;React &#x4E0D;&#x4F1A;&#x6E32;&#x67D3;&#x975E;&#x6807;&#x51C6;&#x5C5E;&#x6027;&#xFF1B;</li>
<li><a href="http://www.w3.org/WAI/intro/aria">&#x65E0;&#x969C;&#x788D;</a>&#x5C5E;&#x6027; <code>aria-</code> &#x53EF;&#x4EE5;&#x6B63;&#x5E38;&#x4F7F;&#x7528;&#x3002;</li>
</ul>
<h3 id="t7&#x5C5E;&#x6027;&#x8BBE;&#x7F6E;">&#x5C5E;&#x6027;&#x8BBE;&#x7F6E; <a href="#t7&#x5C5E;&#x6027;&#x8BBE;&#x7F6E;"> # </a></h3>
<ul>
<li>&#x5728;&#x7EC4;&#x4EF6;&#x884C;&#x5185;&#x8BBE;&#x7F6E;&#x5C5E;&#x6027;&#xFF08;&#x4EE5;&#x4FBF; <code>propTypes</code> &#x6821;&#x9A8C;&#xFF09;&#xFF0C;&#x4E0D;&#x8981;&#x5728;&#x5916;&#x90E8;&#x6539;&#x53D8;&#x5C5E;&#x6027;&#x7684;&#x503C;&#xFF1B;</li>
<li>&#x5C5E;&#x6027;&#x8F83;&#x591A;&#x4F7F;&#x7528; <code>{...this.props}</code> &#x8BED;&#x6CD5;&#xFF1B;</li>
<li>&#x91CD;&#x590D;&#x8BBE;&#x7F6E;&#x5C5E;&#x6027;&#x503C;&#x65F6;&#xFF0C;&#x524D;&#x9762;&#x7684;&#x503C;&#x4F1A;&#x88AB;&#x540E;&#x9762;&#x7684;&#x8986;&#x76D6;&#x3002;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> component = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Component</span> /&gt;</span>;</span>
component.props.foo = x; <span class="hljs-comment">// bad</span>
component.props.bar = y; <span class="hljs-comment">// also bad</span>

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">var</span> component = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Component</span> <span class="hljs-attribute">foo</span>=<span class="hljs-value">{x}</span> <span class="hljs-attribute">bar</span>=<span class="hljs-value">{y}</span> /&gt;</span>;</span>

<span class="hljs-comment">// good</span>
<span class="hljs-keyword">var</span> props = {};
props.foo = x;
props.bar = y;
<span class="hljs-keyword">var</span> component = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Component</span> {<span class="hljs-attribute">...props</span>} /&gt;</span>;</span>

<span class="hljs-keyword">var</span> props = { foo: <span class="hljs-string">&apos;default&apos;</span> };
<span class="hljs-keyword">var</span> component = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Component</span> {<span class="hljs-attribute">...props</span>} <span class="hljs-attribute">foo</span>=<span class="hljs-value">{&apos;override&apos;}</span> /&gt;</span>;</span>
<span class="hljs-built_in">console</span>.log(component.props.foo); <span class="hljs-comment">// &apos;override&apos;</span>
</code></pre>
<h3 id="t8&#x5C5E;&#x6027;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;">&#x5C5E;&#x6027;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F; <a href="#t8&#x5C5E;&#x6027;&#x5BF9;&#x9F50;&#x65B9;&#x5F0F;"> # </a></h3>
<ul>
<li>&#x5C5E;&#x6027;&#x8F83;&#x5C11;&#x65F6;&#x53EF;&#x4EE5;&#x884C;&#x5185;&#x6392;&#x5217;&#xFF1B;</li>
<li>&#x5C5E;&#x6027;&#x8F83;&#x591A;&#x65F6;&#x6BCF;&#x884C;&#x4E00;&#x4E2A;&#x5C5E;&#x6027;&#xFF0C;&#x95ED;&#x5408;&#x6807;&#x7B7E;&#x5355;&#x72EC;&#x6210;&#x884C;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-comment">// bad - too long</span>
&lt;input type=<span class="hljs-string">&quot;text&quot;</span> value={<span class="hljs-keyword">this</span>.state.newDinosaurName} onChange={<span class="hljs-keyword">this</span>.inputHandler.bind(<span class="hljs-keyword">this</span>, <span class="hljs-string">&apos;newDinosaurName&apos;</span>)} /&gt;  

<span class="hljs-comment">// bad - aligning attributes after the tag</span>
&lt;input type=<span class="hljs-string">&quot;text&quot;</span>  
       value={<span class="hljs-keyword">this</span>.state.newDinosaurName}
       onChange={<span class="hljs-keyword">this</span>.inputHandler.bind(<span class="hljs-keyword">this</span>, <span class="hljs-string">&apos;newDinosaurName&apos;</span>)} /&gt;

<span class="hljs-comment">// good</span>
&lt;input  
  type=<span class="hljs-string">&quot;text&quot;</span>
  value={<span class="hljs-keyword">this</span>.state.newDinosaurName}
  onChange={<span class="hljs-keyword">this</span>.inputHandler.bind(<span class="hljs-keyword">this</span>, <span class="hljs-string">&apos;newDinosaurName&apos;</span>)}
 /&gt;

 <span class="hljs-comment">// if props fit in one line then keep it on the same line</span>
&lt;Foo bar=<span class="hljs-string">&quot;bar&quot;</span> /&gt;

<span class="hljs-comment">// children get indented normally</span>
&lt;Foo
  superLongParam=<span class="hljs-string">&quot;bar&quot;</span>
  anotherSuperLongParam=<span class="hljs-string">&quot;baz&quot;</span>
&gt;
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Spazz</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">Foo</span>&gt;</span>


// bad
<span class="hljs-tag">&lt;<span class="hljs-title">Foo</span>
  <span class="hljs-attribute">bar</span>=<span class="hljs-value">&quot;bar&quot;</span>
  <span class="hljs-attribute">baz</span>=<span class="hljs-value">&quot;baz&quot;</span> /&gt;</span>

// good
<span class="hljs-tag">&lt;<span class="hljs-title">Foo</span>
  <span class="hljs-attribute">bar</span>=<span class="hljs-value">&quot;bar&quot;</span>
  <span class="hljs-attribute">baz</span>=<span class="hljs-value">&quot;baz&quot;</span>
/&gt;</span>
</span></code></pre>
<h3 id="t9&#x884C;&#x5185;&#x8FED;&#x4EE3;">&#x884C;&#x5185;&#x8FED;&#x4EE3; <a href="#t9&#x884C;&#x5185;&#x8FED;&#x4EE3;"> # </a></h3>
<ul>
<li>&#x8FD0;&#x7B97;&#x903B;&#x8F91;&#x7B80;&#x5355;&#x7684;&#x76F4;&#x63A5;&#x4F7F;&#x7528;&#x884C;&#x5185;&#x8FED;&#x4EE3;&#x3002;</li>
</ul>
<pre><code class="lang-js">return (
  &lt;div&gt;
    {this.props.data.map(function(data, i) {
      return (&lt;Component data={data} key={i} /&gt;)
    })}
    &lt;/div&gt;
);
</code></pre>
<h2 id="t10&#x5176;&#x4ED6;&#x4EE3;&#x7801;&#x683C;&#x5F0F;">&#x5176;&#x4ED6;&#x4EE3;&#x7801;&#x683C;&#x5F0F; <a href="#t10&#x5176;&#x4ED6;&#x4EE3;&#x7801;&#x683C;&#x5F0F;"> # </a></h2>
<h3 id="t11&#x6CE8;&#x91CA;">&#x6CE8;&#x91CA; <a href="#t11&#x6CE8;&#x91CA;"> # </a></h3>
<ul>
<li><p>&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x7684;&#x6CE8;&#x91CA;&#x9700;&#x8981;&#x7528; <code>{}</code> &#x5305;&#x88F9;&#x3002;</p>
<pre><code class="lang-js">  <span class="hljs-keyword">var</span> content = (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Nav</span>&gt;</span>
      {/* child comment, put {} around */}
      <span class="hljs-tag">&lt;<span class="hljs-title">Person</span>
        /* <span class="hljs-attribute">multi</span>
           <span class="hljs-attribute">line</span>
           <span class="hljs-attribute">comment</span> */
        <span class="hljs-attribute">name</span>=<span class="hljs-value">{window.isLoggedIn</span> ? <span class="hljs-attribute">window.name</span> <span class="hljs-attribute">:</span> &apos;&apos;} // <span class="hljs-attribute">end</span> <span class="hljs-attribute">of</span> <span class="hljs-attribute">line</span> <span class="hljs-attribute">comment</span>
      /&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">Nav</span>&gt;</span>
  )</span>;
</code></pre>
</li>
</ul>
<h3 id="t12&#x5F15;&#x53F7;&#x4F7F;&#x7528;">&#x5F15;&#x53F7;&#x4F7F;&#x7528; <a href="#t12&#x5F15;&#x53F7;&#x4F7F;&#x7528;"> # </a></h3>
<ul>
<li>HTML/JSX &#x5C5E;&#x6027;&#x4F7F;&#x7528;<strong>&#x53CC;&#x5F15;&#x53F7;</strong> <code>&quot;</code>&#xFF1B;</li>
<li>JS &#x4F7F;&#x7528;<strong>&#x5355;&#x5F15;&#x53F7;</strong> <code>&apos;</code>&#xFF1B;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-comment">// bad</span>
&lt;Foo bar=<span class="hljs-string">&apos;bar&apos;</span> /&gt;

<span class="hljs-comment">// good</span>
&lt;Foo bar=<span class="hljs-string">&quot;bar&quot;</span> /&gt;

<span class="hljs-comment">// bad</span>
&lt;Foo style={{ left: <span class="hljs-string">&quot;20px&quot;</span> }} /&gt;

<span class="hljs-comment">// good</span>
&lt;Foo style={{ left: <span class="hljs-string">&apos;20px&apos;</span> }} /&gt;

<span class="hljs-comment">// JavaScript Expression</span>
<span class="hljs-keyword">const</span> person = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Person</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">{window.isLoggedIn</span> ? <span class="hljs-attribute">window.name</span> <span class="hljs-attribute">:</span> &apos;&apos;} /&gt;</span>;</span>

<span class="hljs-comment">// HTML/JSX</span>
<span class="hljs-keyword">const</span> myDivElement = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">&quot;foo&quot;</span> /&gt;</span>;</span>
<span class="hljs-keyword">const</span> app = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Nav</span> <span class="hljs-attribute">color</span>=<span class="hljs-value">&quot;blue&quot;</span> /&gt;</span>;</span>
<span class="hljs-keyword">const</span> content = (
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Container</span>&gt;</span>
    {window.isLoggedIn ? <span class="hljs-tag">&lt;<span class="hljs-title">Nav</span> /&gt;</span> : <span class="hljs-tag">&lt;<span class="hljs-title">Login</span> /&gt;</span>}
  <span class="hljs-tag">&lt;/<span class="hljs-title">Container</span>&gt;</span>
)</span>;
</code></pre>
<h3 id="t13&#x6761;&#x4EF6; HTML">&#x6761;&#x4EF6; HTML <a href="#t13&#x6761;&#x4EF6; HTML"> # </a></h3>
<ul>
<li><p>&#x7B80;&#x77ED;&#x7684;&#x8F93;&#x51FA;&#x5728;&#x884C;&#x5185;&#x76F4;&#x63A5;&#x4E09;&#x5143;&#x8FD0;&#x7B97;&#x7B26;&#xFF1B;</p>
<pre><code class="lang-js">  {<span class="hljs-keyword">this</span>.state.show &amp;&amp; <span class="hljs-string">&apos;This is Shown&apos;</span>}
  {<span class="hljs-keyword">this</span>.state.on ? <span class="hljs-string">&apos;On&apos;</span> : <span class="hljs-string">&apos;Off&apos;</span>}
</code></pre>
</li>
<li><p>&#x8F83;&#x590D;&#x6742;&#x7684;&#x7ED3;&#x6784;&#x53EF;&#x4EE5;&#x5728; <code>.render()</code> &#x65B9;&#x6CD5;&#x5185;&#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x4EE5; <code>Html</code> &#x7ED3;&#x5C3E;&#x7684;&#x53D8;&#x91CF;&#x3002;</p>
<pre><code class="lang-js">  <span class="hljs-keyword">var</span> dinosaurHtml = <span class="hljs-string">&apos;&apos;</span>;

  <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.state.showDinosaurs) {  
    dinosaurHtml = (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">section</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">DinosaurTable</span> /&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">DinosaurPager</span> /&gt;</span>
      <span class="hljs-tag">&lt;/<span class="hljs-title">section</span>&gt;</span>
    )</span>;
  }

  <span class="hljs-keyword">return</span> (  
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
      ...
      {dinosaurHtml}
      ...
    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
  )</span>;
</code></pre>
</li>
</ul>
<h3 id="t14() &#x4F7F;&#x7528;">() &#x4F7F;&#x7528; <a href="#t14() &#x4F7F;&#x7528;"> # </a></h3>
<ul>
<li><p>&#x591A;&#x884C;&#x7684; JSX &#x4F7F;&#x7528; <code>()</code> &#x5305;&#x88F9;&#xFF0C;&#x6709;&#x7EC4;&#x4EF6;&#x5D4C;&#x5957;&#x65F6;&#x4F7F;&#x7528;&#x591A;&#x884C;&#x6A21;&#x5F0F;&#xFF1B;</p>
<pre><code class="lang-js">  <span class="hljs-comment">// bad</span>
  <span class="hljs-keyword">return</span> (<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">ComponentOne</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">ComponentTwo</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>)</span>;

  <span class="hljs-comment">// good</span>
  <span class="hljs-keyword">var</span> multilineJsx = (  
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">header</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">Logo</span> /&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">Nav</span> /&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">header</span>&gt;</span>
  )</span>;

  <span class="hljs-comment">// good</span>
  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">ComponentOne</span> /&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-title">ComponentTwo</span> /&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
  )</span>;
</code></pre>
</li>
<li><p>&#x5355;&#x884C; JSX &#x7701;&#x7565; <code>()</code>&#x3002;</p>
<pre><code class="lang-js">  <span class="hljs-keyword">var</span> singleLineJsx = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">h1</span>&gt;</span>Simple JSX<span class="hljs-tag">&lt;/<span class="hljs-title">h1</span>&gt;</span>;</span>  

  <span class="hljs-comment">// good, when single line</span>
  render() {
    <span class="hljs-keyword">const</span> body = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>hello<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>;</span>
    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">MyComponent</span>&gt;</span>{body}<span class="hljs-tag">&lt;/<span class="hljs-title">MyComponent</span>&gt;</span>;</span>
  }
</code></pre>
</li>
</ul>
<h3 id="t15&#x81EA;&#x95ED;&#x5408;&#x6807;&#x7B7E;">&#x81EA;&#x95ED;&#x5408;&#x6807;&#x7B7E; <a href="#t15&#x81EA;&#x95ED;&#x5408;&#x6807;&#x7B7E;"> # </a></h3>
<ul>
<li>JSX &#x4E2D;&#x6240;&#x6709;&#x6807;&#x7B7E;<strong>&#x5FC5;&#x987B;&#x95ED;&#x5408;</strong>&#xFF1B;</li>
<li>&#x6CA1;&#x6709;&#x5B50;&#x5143;&#x7D20;&#x7684;&#x7EC4;&#x4EF6;&#x4F7F;&#x7528;&#x81EA;&#x95ED;&#x5408;&#x8BED;&#x6CD5;&#xFF0C;&#x81EA;&#x95ED;&#x5408;&#x6807;&#x7B7E; <strong><code>/</code> &#x524D;&#x7559;&#x4E00;&#x4E2A;&#x7A7A;&#x683C;</strong>&#x3002;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-comment">// bad</span>
&lt;Logo&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-title">Logo</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Logo</span>/&gt;</span>

// very bad
<span class="hljs-tag">&lt;<span class="hljs-title">Foo</span>                 /&gt;</span>

// bad
<span class="hljs-tag">&lt;<span class="hljs-title">Foo</span>
 /&gt;</span>

// good
<span class="hljs-tag">&lt;<span class="hljs-title">Logo</span> /&gt;</span>
</span></code></pre>
<h3 id="t16&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x4EE3;&#x7801;&#x7EC4;&#x7EC7;">&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x4EE3;&#x7801;&#x7EC4;&#x7EC7; <a href="#t16&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x4EE3;&#x7801;&#x7EC4;&#x7EC7;"> # </a></h3>
<ul>
<li><p><strong>&#x4E0D;&#x8981;&#x4F7F;&#x7528;&#x4E0B;&#x5212;&#x7EBF;&#x524D;&#x7F00;</strong>&#x547D;&#x540D; React &#x7EC4;&#x4EF6;&#x7684;&#x65B9;&#x6CD5;&#xFF1B;</p>
<pre><code class="lang-js">  <span class="hljs-comment">// bad</span>
  React.createClass({
    _onClickSubmit() {
      <span class="hljs-comment">// do stuff</span>
    }

    <span class="hljs-comment">// other stuff</span>
  });

  <span class="hljs-comment">// good</span>
  React.createClass({
    onClickSubmit() {
      <span class="hljs-comment">// do stuff</span>
    }

    <span class="hljs-comment">// other stuff</span>
  });
</code></pre>
</li>
<li>&#x6309;&#x7167;&#x751F;&#x547D;&#x5468;&#x671F;&#x7EC4;&#x987A;&#x5E8F;&#x7EC7;&#x7EC4;&#x4EF6;&#x7684;&#x65B9;&#x6CD5;&#x3001;&#x5C5E;&#x6027;&#xFF1B;</li>
<li>&#x65B9;&#x6CD5;&#xFF08;&#x5C5E;&#x6027;&#xFF09;&#x4E4B;&#x95F4;&#x7A7A;&#x4E00;&#x884C;&#xFF1B;</li>
<li><code>.render()</code> &#x65B9;&#x6CD5;&#x59CB;&#x7EC8;&#x653E;&#x5728;&#x6700;&#x540E;&#xFF1B;</li>
<li>&#x81EA;&#x5B9A;&#x4E49;&#x65B9;&#x6CD5; React API &#x65B9;&#x6CD5;&#x4E4B;&#x540E;&#x3001;<code>.render()</code> &#x4E4B;&#x524D;&#x3002;</li>
</ul>
<pre><code>```js
// React &#x7EC4;&#x4EF6;&#x4E2D;&#x6309;&#x7167;&#x4EE5;&#x4E0B;&#x987A;&#x5E8F;&#x7EC4;&#x7EC7;&#x4EE3;&#x7801;
React.createClass({  
  displayName: &apos;&apos;,

  mixins: [],

  statics: {},

  propTypes: {},

  getDefaultProps() {
    // ...
  },

  getInitialState() {
    // do something
  },

  componentWillMount() {
      // do something
  },

  componentDidMount() {
    // do something: add DOM event listener, etc.
  },

  componentWillReceiveProps() {
  },

  shouldComponentUpdate() {},

  componentWillUpdate() {},

  componentDidUpdate() {},

  componentWillUnmount() {
      // do something: remove DOM event listener. etc.
  },

  // clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
  handleClick() {
    // ...
  },

  // getter methods for render like getSelectReason() or getFooterContent()

  // Optional render methods like renderNavigation() or renderProfilePicture()

  render() {
    // ...
  }
});
```
</code></pre><h2 id="t17&#x4EE3;&#x7801;&#x6821;&#x9A8C;&#x5DE5;&#x5177;">&#x4EE3;&#x7801;&#x6821;&#x9A8C;&#x5DE5;&#x5177; <a href="#t17&#x4EE3;&#x7801;&#x6821;&#x9A8C;&#x5DE5;&#x5177;"> # </a></h2>
<ul>
<li><a href="https://www.github.com/eslint/eslint">ESLint</a></li>
<li><a href="https://github.com/yannickcr/eslint-plugin-react">ESLint React Plugin</a></li>
</ul>
<h2 id="t18&#x53C2;&#x8003;&#x8D44;&#x6E90;">&#x53C2;&#x8003;&#x8D44;&#x6E90; <a href="#t18&#x53C2;&#x8003;&#x8D44;&#x6E90;"> # </a></h2>
<ul>
<li><a href="http://facebook.github.io/react/docs/glossary.html">React DOM &#x672F;&#x8BED;&#x8868;</a></li>
<li><a href="https://github.com/airbnb/javascript/tree/master/react">Airbnb React/JSX Style Guide</a></li>
<li><a href="http://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%8F%E5%A4%A7%E5%B0%8F%E5%AF%AB">&#x9A7C;&#x5CF0;&#x547D;&#x540D;&#x6CD5;</a></li>
<li><a href="http://facebook.github.io/react/docs/component-specs.html">React &#x7EC4;&#x4EF6;&#x89C4;&#x8303;&#x53CA;&#x751F;&#x547D;&#x5468;&#x671F;</a></li>
<li><a href="https://github.com/airbnb/javascript">Airbnb JavaScript Style Guide</a></li>
<li><a href="http://facebook.github.io/react/docs/tags-and-attributes.html">React &#x652F;&#x6301;&#x7684; HTML &#x6807;&#x7B7E;&#x548C;&#x5C5E;&#x6027;</a></li>
<li><a href="http://facebook.github.io/react/tips/style-props-value-px.html">React &#x4E0D;&#x81EA;&#x52A8;&#x6DFB;&#x52A0; <code>px</code> &#x7684; style &#x5C5E;&#x6027;</a></li>
</ul>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>

</div>


</body>
</html>
